<template>
	<view class="content">
		<view class="top-wrap"></view>
		<view class="wrap">
			<view class="" style="width: 100%;text-align: center;">
				<image src="../../static/log.png" style="width: 127rpx;height: 127rpx;"></image>
				<view style="color: #CAA153;font-size: 50rpx;margin-top: 20rpx;">开心小圈</view>
			</view>
			<view class="rzfy">
				<view class="texta">
					<view class="title">
						认证费用
					</view>
					<view class="desc">
						今日已有779名诚意认证用户加入
					</view>
				</view>
				<view class="moneydesc">
					<view class="xj">
						￥<span>16.8</span>/永久
					</view>
					<view class="yj">
						原价￥98
					</view>
				</view>
			</view>
			<button class="new-btn login-btn" @click="nav()">立即加入</button>	
			<view class="gyg" @click="wsmysf()">为什么要收费</view>			
		</view>
		<view class="jieshi" v-if="show">
			<view class="wenzi">
				1.“开心小圈”致力于打造100%真实健康交友平台，通过收取基本的真正费用，筛选掉大部分酒饭托，微商广告等虚假用户及保证交友安全<br>
				2.进行严格的身份认证需要消耗大量的人力成本，收取基本的认证费用可以保证“开心小圈”持续稳定运营
			</view>
		</view>
		<view class="mengceng" v-if="show" @click="fshow"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				xieyi: true,
				platform:'',
				price:0,
				tui:0
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			  this.platform='devtools'
			// #endif
			
			// #ifdef APP-PLUS
			uni.getSystemInfo({
				success:(res) => {
					console.log(res)
					this.system = res.system  // ios
					this.platform = res.platform  // 14.3
				}
			})
			// #endif
			this.zzz_system_config()
		},
		onBackPress() {
			var that = this;
			if(that.tui == 0){
				uni.showModal({
					title: '温馨提示',
					content: '与爱只差一步，即可浪漫邂逅，确认要放弃吗？',
					confirmText: '立即加入',
					cancelText: '在逛一逛',
					showCancel: true,
					success: function (res) {
						that.tui = 1;
						if(res.cancel){
							if(uni.getStorageSync('sex') == '男'){
								var sex = 1;
							}else{
								var sex = 2;
							}
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/guangyiguang/index?sex='+sex,
								})
							}, 300)
						}
					}
				})
			}
			if(that.tui == 1){
				uni.showModal({
					title: '温馨提示',
					content: '与爱只差一步，即可浪漫邂逅，确认要放弃吗？',
					confirmText: '立即加入',
					cancelText: '我意已决',
					showCancel: true,
					success: function (res) {
						if(res.cancel){
							that.$store.commit('logout')
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/appview/index',
								})
							}, 1000)
						}
						// that.nav()
						console.log(res);
					}
				})
			}
			return true
		},
		methods: {
			zzz_system_config(){
				var that = this;
				uni.showLoading({
					title: '加载中'
				})
				uni.request({
					url: that.global.url + '/api/guangyiguang/money',
					method: 'POST',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success: (res) => {
						console.log('首页数据')
						console.log(res.data)
						uni.hideLoading()
						if (res.data.code == 200) {
							that.price = res.data.result
						} else {
							console.log(res);
						}
					}
				})
			},
			fshow(){
				this.show = false
			},
			wsmysf(){
				this.show = true;
			},
			async nav(text){
				var that = this;
				
				uni.getProvider({
				    service: 'share',
				    success: function (res) {
						console.log(res);
				        if (res.provider[0] == 'weixin') {
				            console.log('微信已经安装')
				        } else {
				            console.log('微信尚未安装')
							uni.showModal({
								title: '温馨提示',
								content: '认证费用目前仅支持微信支付，请安装微信',
								confirmText: '确定',
								showCancel: false
							})
				        }
				    }
				})
				
				const {data:res} = await that.$Request({
					url:'apis/Home/User/authentication_buy',
					data: {
						user_id: that.$store.state.userid,
						price: that.price
					}
				})
				console.log(res);
				console.log(that.platform);
				if (res && res.code == 200) {
					if(that.platform == 'devtools'){ //小程序
						// 小程序支付
						that.$WxMiniprogramPay({
							money: that.price,
							number: res.vip_order,
						})
					}else{ //app
						// if(that.platform == 'ios'){ //ios系统直接苹果支付
						// 	//app微信支付
						// 	that.$IosprogramPay({
						// 		money: that.price,
						// 		number: res.vip_order,
						// 	})
						// }else{ 
							//微信支付
							that.$WeChatprogramPay({
								money: that.price,
								number: res.vip_order,
							})
						// }
					}
				} else {
					that.$u.toast(res.result)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		// display: flex;
		flex-direction: column;
		position: relative;
		/* 上方滚动 */
		.top-wrap {
			background-image: url('https://z3.ax1x.com/2021/07/20/WtaMtK.jpg');
			background-size: 100%;
			/* background-color: #d800ff; */
			padding: 0;
			width: 100vw;
			-webkit-animation: slideop 30s linear infinite;
			animation: slideop 30s linear infinite;
			background-position: 0 bottom;
			width: 100vw;
			height: 100vh;
		}
		
		@keyframes slideop {
			0% {
				background-position: 0;
			}
		
			100% {
				background-position: 0 bottom;
			}
		}
		
		.wrap {
			padding: 10px;
			background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1));
			position: absolute;
			width: 100%;
			bottom: 0;
			box-shadow: 10px 10px 30px 50px rgba(0, 0, 0, 0.5);
			.title {
				margin: 20rpx 30rpx;
				color: #fff;
				font-size: 25px;
				font-weight: bold;
			}

			.text {
				margin: 0rpx 30rpx;
				text{
					margin-right: 10px;
					color: #fff;
				}
			}
			
			.new-btn {
				background: linear-gradient(to right, #d9a14e, #b57e2c);
				color: #fff;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 90rpx;
				width: 60%;
				margin: 60rpx auto;
				border-radius: 60rpx;
			}
			.check-box {
				border: 1px solid #ddd;
				width: 20px;
				height: 20px;
				margin-right: 5px;
			}

			.check-box.active {
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.xieyi {
				color: #fff;
				text{
					color: #fff;
				}
			}
		}
	}
	.gyg {
		border: 2px solid #fff;
		border-radius: 60rpx;
		color: #fff;
		width: 60%;
		font-size: 32rpx;
		font-weight: bold;
		line-height: 90rpx;
		margin: 60rpx auto;
		text-align: center;
	}
	
	.jieshi{
		position: absolute;
		top: 50%;
		left: 50%;
		transform:translate(-50%,-50%);
		width: 90%;
		height: 300rpx;
		z-index: 2;
		background: url('../../static/guangyiguang/tc.png') no-repeat top center;
		background-size: 100% 100%;
		
		// image{
		// 	width: 100%;
		// 	height: 400rpx;
		// }
		.wenzi{
			position: absolute;
			top: 0;
			left: 0;
			color: #000;
			padding: 20rpx;
			font-size: 28rpx;
		}
	}
	.rzfy{
		width: 98%;
		border: 2px solid #929292;
		border-radius: 20rpx;
		height: 160rpx;
		margin: 60rpx auto 0;
		display: flex;
		justify-content: space-between;
		position: relative;
		color:#fff;
		
		.texta{
			.title{
				font-size: 38rpx;
				margin: 20rpx 30rpx;
			}
			.desc{
				font-size: 26rpx;
				margin: 0 30rpx;
			}
		}
		.moneydesc{
			position: absolute;
			top:-6rpx;
			right:-6rpx;
			width: 38%;
			height: 166rpx;
			background: linear-gradient(to right, #d9a14e, #b57e2c);
			border: 2px solid #b57e2c;
			border-radius: 20rpx;
			text-align: center;
			font-size: 20rpx;
			.xj{
				margin-top: 20rpx;
				span{
					font-size: 48rpx;
				}
			}
			.yj{
				margin-top: 15rpx;
			}
		}
	}
	.mengceng{
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 1;
		background: rgba(0,0,0,0.5);
	}

</style>
